<template>
  <ion-page>
    <ion-header>
      <ion-toolbar color="light" class="pub-hearder">
        <ion-buttons slot="start">
          <ion-back-button text=""></ion-back-button>
        </ion-buttons>
        <ion-title>
          我的收藏
        </ion-title>
      </ion-toolbar>
      <ion-toolbar color="light" class="pub-hearder">
        <ion-row>
          <ion-col :class="{'active': index === 1}" @click="navChange(1)">题目</ion-col>
          <ion-col :class="{'active': index === 2}" @click="navChange(2)">视频</ion-col>
        </ion-row>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <div class="main-page">
          <div class="list" v-for="(item, index) of listData" :key="index" @click="listChange(index)">
            <div class="title">
                <img :src="require(listIndex === index ? '@/assets/images/up-red.png' : '@/assets/images/red-down.png')" alt=""> 
                {{ item.title }}
                <p>题目数：{{ item.num }}题</p>
                <ion-icon class="chevronForwardOutline" :icon="chevronForwardOutline"></ion-icon>
            </div>
            <div v-if="listIndex === index">
              <div class="childlist"  v-for="(item1, index1) of item.children" :key="index1" @click="listChange1($event, index1)">
                <div class="title title1">
                  <img :src="require(listIndex1 === index ? '@/assets/images/up.png' : '@/assets/images/down.png')" alt=""> {{ item1.title }} <span v-if="item1.ismian === 1">限免</span> <ion-icon v-else :icon="bagHandleOutline"></ion-icon>
                </div>
                <p>题目数：{{ item1.num }}题</p>
                <ion-icon class="chevronForwardOutline" :icon="chevronForwardOutline"></ion-icon>
                <div v-if="listIndex1 === index1">
                  <div class="childlist"  v-for="(item2, index2) of item1.children" :key="index2">
                    <div class="title title2">
                      {{ item2.title }}
                    </div>
                    <p class="p1">题目数：{{ item1.num }}题</p>
                    <ion-icon class="chevronForwardOutline" :icon="chevronForwardOutline"></ion-icon>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
    </ion-content>
  </ion-page>
</template>

<script lang="ts">
import { IonHeader, IonToolbar, IonButtons, IonBackButton,  IonTitle , IonPage, IonContent } from '@ionic/vue';
import { reactive, toRefs, onMounted } from 'vue';
import { chevronForwardOutline, bagHandleOutline } from 'ionicons/icons';
import { NativeService } from '@/utils/native-service';
export default {
  name: 'login-page',
  components: {
    IonPage, IonContent, IonHeader, IonToolbar, IonButtons, IonBackButton,  IonTitle
  },
  setup() {
    const nativeService = new NativeService();
    const state = reactive({
      index: 1,
      listIndex: -1,
      listIndex1: -1,
      listData: [
        {
            title: '乐理',
            num: 100,
            children: [
              {
                title: '第一章 乐理基础乐理基础',
                total: '20',
                num: 0,
                ismian: 1,
                children: [
                    {
                        title: '1.1  乐理基础乐理基础',
                        total: '20',
                        num: 0,
                        ismian: 1,
                    },
                    {
                        title: '1.1  乐理基础乐理基础',
                        total: '20',
                        num: 0,
                        ismian: 1,
                    }
                ],
              }
            ]
        },
        {
            title: '真题训练',
            num: 100,
            children: [
              {
                title: '第一章 乐理基础乐理基础',
                total: '20',
                num: 0,
                ismian: 1,
                children: [
                    {
                        title: '1.1  乐理基础乐理基础',
                        total: '20',
                        num: 0,
                        ismian: 1,
                    },
                    {
                        title: '1.1  乐理基础乐理基础',
                        total: '20',
                        num: 0,
                        ismian: 1,
                    }
                ],
              }
            ]
        },
      ],
      fileList: [
            {
                title: '考音乐学院到底要不要跑课',
                size: 10,
                downNum: 2222,
                isMian: 1
            },
            {
                title: '考音乐学院到底要不要跑课',
                size: 10,
                downNum: 2222,
                isMian: 0
            },
            {
                title: '考音乐学院到底要不要跑课',
                size: 10,
                downNum: 2222,
                isMian: 1
            }
        ],
    })

    onMounted(() => {
      nativeService.startLoc().then((res: any) => {
        console.log(res);
      });
    });

    // startLoc

    function selectImg(){
      nativeService.addImgFile((res: any) => {
        console.log(res);
      })
    }

    function listChange(index: number){
      if(state.listIndex !== index){
        state.listIndex = index;
      } else {
        state.listIndex = -1;
      }
    }

    function listChange1(ev: any, index: number){
      ev.stopPropagation();
      if(state.listIndex1 !== index){
        state.listIndex1 = index;
      } else {
        state.listIndex1 = -1;
      }
    }

    function navChange(index: number){
      if(state.index !== index){
        state.index = index;
      } else {
        state.index = -1;
      }
    }
    return {
      ...toRefs(state),
      chevronForwardOutline,
      selectImg,
      listChange,
      bagHandleOutline,
      listChange1,
      navChange
    }
  }
}
</script>
<style lang="scss" scoped>
.pub-hearder {
  ion-col{
    text-align: center;
  }
  ion-col::after{
    content: '';
    display: block;
    width: 15px;
    height: 3px;
    background: #fff;
    margin: 0px auto;
    position: relative;
    top: 2px;
  }
  ion-col.active{
    color: #CA3032;
  }
  ion-col.active::after{
    background: #CA3032;
  }
}

.main-page {
    padding: 10px;
    background: #fff;
    .list{
      position: relative;
      margin-top: 10px;
      .chevronForwardOutline{
          position: absolute;
          right: 10px;
          top: 4px;
          color: #999;
        }
      .title{
        font-size: 16px;
        color: #333333;
        font-weight: bold;
        padding-right: 20px;
        margin-bottom: 10px;
        .title1{
          font-size: 16px;
          color: #333333;
          font-weight: bold;
        }
        span{
          color: #CA3032;
          font-size: 12px;
          padding: 3px 5px;
          background: rgba(202, 48, 50, 0.1);
          border-radius: 2px;
          margin-left: 5px;
        }
        ion-icon{
          font-size: 16px;
        }
        img{
          width: 20px;
          vertical-align: middle;
          margin-right: 10px;
          position: relative;
          top: -1px;
        }
      }
      p{
        margin: 0px;
        margin-left: 35px;
        font-size: 12px;
        color: #999999;
        margin-bottom: 20px;
      }
      .childlist{
        position: relative;
        .title{
          font-size: 14px;
          padding-left: 35px;
          font-weight: normal;
        }
        .p1{
          padding-left: 37px;
        }
        .title2{
          padding-left: 70px;
        }
      }
    }
}
.grad{
    background: #fff;
    ion-icon{
        position: relative;
        top: 2px;
        
    }
    ion-item{
        margin-bottom: 20px;
    }
    .desc{
        font-size: 13px;
        color: #5E6266;
        overflow: hidden;  //超出隐藏
        text-overflow: ellipsis; //文本超出时显示省略号
        white-space: nowrap; //设置文本不换行
    }
    .filename{
        font-weight: bold;
        font-size: 16px;
        color: #1E1E1F;
        margin-bottom: 0px;
        margin-top: 0px;
    }
    span{
        font-size: 12px;
        color: #939699;
    }
    label{
        font-size: 12px;
        color: #fff;
        background: #CA3032;
        padding: 3px 5px;
        margin-right: 5px;
        border-radius: 3px;
    }
}
</style>